<template>
    <!-- 活动表单信息控件 -->
    <el-card shadow="never" class="activily-detail">
        <activily-info-control ref="activilyInfoControRef" />
    </el-card>
    <!-- 控制步骤的按钮 -->
    <div class="activily-footer">
        <el-button plain @click="onCancel">取消</el-button>
        <el-button v-show="stepValue > 0" plain type="primary" @click="toPrev">上一步</el-button>
        <el-button v-show="stepValue < 3" type="primary" @click="toNext">下一步</el-button>
        <el-button v-show="stepValue === 3" type="primary" @click="onSave">保存</el-button>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, reactive, provide, onBeforeMount, onUnmounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { getGroupFissionInfoById } from '@/api/smartMarketing/drainage/groupFission';

import activilyInfoControl from './components/activily-info-control.vue';

import { IPageType, IFormParams } from './components/utils/interface';
import { stepValue, setFormParams, initFormParams } from './components/utils/paramsManager';
import { setPrizeFormParams } from '@/components/zw/activity/award-settings/utils/paramsManager';
const route = useRoute();
const router = useRouter();

/* ----------------------------操作按钮-start---------------------------- */
/**
 * @description 表单控件ref实例
 * @returns / {  next: 下一步， prve: 上一步，cancel: 取消, save: 保存 }
 */
const activilyInfoControRef = ref<IActivilyInfoControRef>();
// 下一步
const toNext = () => {
    activilyInfoControRef.value?.next();
};
// 上一步
const toPrev = () => {
    activilyInfoControRef.value?.prev();
};
// 下一步
const onCancel = () => {
    activilyInfoControRef.value?.cancel();
};
// 下一步
const onSave = () => {
    activilyInfoControRef.value?.save();
};

interface IActivilyInfoControRef {
    next: () => unknown;
    prev: () => unknown;
    cancel: () => unknown;
    save: () => unknown;
    setWelcomeInfo?: (data: any, groupData: any) => unknown;
    setPosterInfo?: (data: any) => unknown;
}
/* ----------------------------操作按钮-end---------------------------- */

/* ----------------------------注入页面类型依赖-start---------------------------- */
/** 页面是否是编辑，新建，复制 类型 */
const pageType = reactive<IPageType>({
    edit: route.query.type === 'edit',
    new: route.query.type === 'new',
    copy: route.query.type === 'copy'
});
provide('pageType', pageType);

/** 是否禁用 */
const formDisabled = ref(false);
provide('formDisabled', formDisabled);
/* ----------------------------注入页面类型依赖-end---------------------------- */

/* ----------------------------回显数据-start---------------------------- */
// 详情接口返回的数据，给子组件使用
const formDetailInfo = { value: {} };
provide('formDetailInfo', formDetailInfo);

const beforeGetInfo = () => {
    // 新增不回显
    if (pageType.new) {
        return;
    }

    if (!route.query.id) {
        ElMessage.warning('缺少活动id');
        router.back();
        return;
    }
    return true;
};
/**
 * 获取群裂变详情
 */
const getGroupFissionInfo = async () => {
    if (!beforeGetInfo()) {
        return;
    }

    try {
        const res: IFormParams = await getGroupFissionInfoById({
            activity_id: route.query.id
        });

        // 编辑：未开始的情况下禁用
        if (res.activity_status !== 1 && pageType.edit) {
            formDisabled.value = true;
        }

        // 复制页面处理过滤数据
        if (pageType.copy) {
            res.activity_name += '副本';

            // 复制时若有兑换码，则清理
            for (const rewardItem of res.reward_list) {
                rewardItem.exchange_file_list = [];
            }

            // 复制时清除好友欢迎语id
            res.staff_welcome.welcome_friend_id = '';
            res.groupchat_welcome.welcome_groupchat_id = '';
        }

        // 回显数据
        setFormParams(res);
        setPrizeFormParams(res);
        formDetailInfo.value = res;

        activilyInfoControRef.value?.setPosterInfo?.(res.poster.position);
        // 设置欢迎语内容
        // 等待dom渲染之后，原因是第三步有个watchEffact。让watchEffact先执行，设置默认欢迎语就会没有问题了
        await nextTick();
        activilyInfoControRef.value?.setWelcomeInfo?.(res.staff_welcome, res.groupchat_welcome);
    } finally {
    }
};
onBeforeMount(getGroupFissionInfo);
/* ----------------------------回显数据-end---------------------------- */

onUnmounted(() => {
    // 组件销毁后初始化params，否则会有缓存的情况
    initFormParams();
});
</script>

<style lang="scss" scoped>
.activily-detail {
    height: calc(100vh - 207px);
    margin-bottom: 16px;

    :deep(.el-card__body) {
        height: 100%;
        padding: 0;
    }
}

.activily-footer {
    text-align: center;
    margin: 0 -16px -16px;
    padding: 16px 24px;
    border-radius: 0;
    border: none;
    border-top: 1px solid #e4e7ed;
    background-color: #fff;
}

// 覆盖按钮样式
:deep(.el-button.el-button--primary.is-plain:not(.is-disabled)) {
    --el-button-bg-color: #fff;
    --el-button-border-color: var(--el-color-primary);

    &:hover {
        color: #ff6b00;
        border-color: #ff6b00;
        background-color: #fdefe5;
    }

    &:focus {
        color: #ff6b00;
        background-color: var(--el-button-bg-color);
        border: 1px solid #ffb580;
        outline: none;
    }
}
</style>
